<template>
    <div>
        <div style="margin: 32px 0">在线excel <el-button type="primary" @click="saveData">保存数据</el-button></div>
        <hot-table ref="hotTable" :settings="hotSettings" licenseKey="non-commercial-and-evaluation" :data="tableData" />

        <div style="margin: 32px 0">
            <div>获取到的数据：</div>
            <div>
                {{ JSON.stringify(showData) }}
            </div>
        </div>
    </div>
</template>

<script>
import { HotTable } from '@handsontable/vue'
import Handsontable from 'handsontable'
import 'handsontable/languages/zh-CN'
import { HyperFormula } from 'hyperformula'

export default {
    name: 'HelloWorld',
    data() {
        return {
            hotSettings: {
                minCols: 10,
                minRows: 10,
                className: 'htCenter htMiddle',
                // selectionMode: 'single',
                manualRowResize: true,
                manualColumnResize: true,
                colHeaders: true,
                rowHeaders: true,
                language: 'zh-CN',
                mergeCells: true,
                copyPaste: true,
                colWidths: 100,
                height: 'auto',
                autoWrapRow: true,
                autoWrapCol: true,
                rowHeights: 30,
                // columnSorting: true,
                // columns: [
                //     {
                //         title: 'Brand',
                //         type: 'text',
                //         data: 'brand',
                //     },
                //     {
                //         title: 'Model',
                //         type: 'text',
                //         data: 'model',
                //     },
                //     {
                //         title: 'Price',
                //         type: 'numeric',
                //         data: 'price',
                //         numericFormat: {
                //             pattern: '$ 0,0.00',
                //             culture: 'en-US',
                //         },
                //     },
                //     {
                //         title: 'Date',
                //         type: 'date',
                //         data: 'sellDate',
                //         dateFormat: 'MMM D, YYYY',
                //         correctFormat: true,
                //         className: 'htRight',
                //     },
                //     {
                //         title: 'Time',
                //         type: 'time',
                //         data: 'sellTime',
                //         timeFormat: 'hh:mm A',
                //         correctFormat: true,
                //         className: 'htRight',
                //     },
                //     {
                //         title: 'In stock',
                //         type: 'checkbox',
                //         data: 'inStock',
                //         className: 'htCenter',
                //     },
                // ],
                //对td的渲染
                // cells: function (row, column, prop) {
                //     let cellProp = {}
                //     let value
                //     if (value) {
                //         //自定义你的td的renderer
                //         cellProp.renderer = yourcellrenderer
                //         //定义td编辑方式，具体参见官方文档，false为不能编辑，但是键盘删除和复制粘贴是可用的
                //         if (value.type) {
                //             cellProp.editor = false
                //         } else {
                //             cellProp.editor = 'text'
                //         }
                //     }
                //     return cellProp //return 出来含有固定参数的对象，覆盖默认的配置
                // },
                afterChange: function (changes, sources) {
                    console.log(changes, sources) // changes为数组数据改变后的坐标（row,col），sources改变的类型(具体参见文档)
                    if (sources == 'edit') {
                        console.log(changes)
                        changes.forEach(([row, prop, oldValue, newValue]) => {
                            //this 表示当前的handsontable对象
                            let cell = this.getCell(row, prop)
                            cell.style.background = 'lavender'
                        })
                    }
                },
                filters: true, // 下拉筛选
                dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
                // dropdownMenu: true, // 下拉
                contextMenu: true, // 右键
                // contextMenu: ['row_above', 'row_below', 'col_left', 'col_right', '---------', 'remove_row', 'remove_col', '---------', 'alignment', 'copy', 'cut', 'mergeCells'],
                formulas: {
                    // 公式
                    engine: HyperFormula,
                },
            },
            tableData: [[]], // Handsontable 初始数据
            showData: [], // 展示已保存数据
        }
    },
    components: {
        HotTable,
    },
    mounted() {},
    methods: {
        //保存数据
        saveData() {
            this.showData = this.$refs.hotTable.hotInstance.getData()
        },
    },
}
</script>

<style></style>
